<template>
	<u-popup
		v-model="eggConversionShow"
		mode="center"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="info-box">
				<view class="info-title">
					兑换记录
				</view>
				<view class="info-list">
					<scroll-view
						scroll-y
						@scrolltolower="scrolltolower"
						class="center">
						<view
							v-for="(val, index) in conversionList"
							:key="index"
							class="list-item">
							<view class="item-left">
								<view>{{ val.title }}</view>
								<view>{{ val.time }}</view>
							</view>
							<view class="item-right">-{{ val.num }}</view>
						</view>
					</scroll-view>
					<view class="list-tip">
						下拉展示更多
						<u-icon
							class="tip-icon"
							size="18"
							name="arrow-left-double"></u-icon>
					</view>
				</view>
			</view>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/exchange_close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myFriend',
		props: {
			eggConversionShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				conversionList: [
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
					{
						title: '兑换xxx物品',
						num: '3',
						time: '2023-11-15 15:00:00',
					},
				],
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'eggConversionShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		padding: 30rpx;
		.info-box {
			width: 690rpx;
			height: 1100rpx;
			background: #f0d9ad;
			border: 8rpx solid #df8934;
			border-radius: 30rpx;
			box-shadow: 0rpx 15rpx 0rpx 0rpx rgba(255,255,255,0.88) inset;
			color: #732011;
			.info-title {
				padding: 60rpx 0 38rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
			}
			.info-list {
				position: relative;
				width: 630rpx;
				height: 920rpx;
				margin: auto;
				padding: 20rpx 32rpx 40rpx;
				background-color: #FBEDD3;
				border: 2rpx solid #e9be7f;
				border-radius: 20rpx;
				.center {
					height: 100%;
					.list-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx 0;
						border-bottom: 2rpx solid #E9BE7F;
						.item-left {
							view:first-of-type {
								margin-bottom: 22rpx;
								font-weight: bold;
							}
							view:last-of-type {
								font-size: 24rpx;
								opacity: .7;
							}
						}
						.item-right {
							font-size: 32rpx;
							color: #249A19;
							font-weight: bold;
						}
						
					}
				}
				.list-tip {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					width: 100%;
					height: 90rpx;
					padding-bottom: 20rpx;
					background: linear-gradient(0deg,#fbedd3 0%, rgba(251,237,211,0.69) 81%, rgba(251,237,211,0.00) 100%);
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #A37564;
					.tip-icon {
						margin-left: 8rpx;
						padding-bottom: 4rpx;
						transform: rotate(-90deg);
					}
				}
			}
		}
		
		.close {
			position: absolute;
			right: 10rpx;
			top: 5rpx;
			z-index: 11;
			width: 60rpx;
		}
	}
}
</style>